﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="registrati2.aspx.cs" Inherits="src_registrati2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Another ForumFree</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
        <meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="/FORUMDEFINITIVO/css/Login.css" />
        <link rel="stylesheet" type="text/css" href="/FORUMDEFINITIVO/css/global.css" />
		<script src="/FORUMDEFINITIVO/inc/js/log.font.js"" type="text/javascript"></script>
		<script src="/FORUMDEFINITIVO/inc/js/logi.js" type="text/javascript"></script>
		<script type="text/javascript">
		    Cufon.replace('h1', { textShadow: '1px 1px #fff' });
		    Cufon.replace('h2', { textShadow: '1px 1px #fff' });
		    Cufon.replace('h3', { textShadow: '1px 1px #000' });
		    Cufon.replace('.back');
		</script>
    
    <body>
		<div class="wrapper">
			<div id="wrapper">
                <div id="top">
                    <h1 class="logo">ANOTHER<br />
                        <span class="green1">OPENSOURCE</span> FORUM</h1>
                    <br />
                    </div>
			<h2>&nbsp;</h2>
			<div class="content" >
				<div id="form_wrapper" class="form_wrapper">
					<form id="Form1" class="register active"  runat="server">
						<h3>Registrati</h3>
						<div class="column">
							<div>
								<label>Nome:</label>
								<asp:TextBox ID="TBNome" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
							<div>
								<label>Username:</label>
								<asp:TextBox ID="TBUsername" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
							<div>
								<label>Anno di nascita:</label>
								<asp:TextBox ID="TBNascita" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
                            <div>
								<label>Città:</label>
								<asp:TextBox ID="TBCitta" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
 
						</div>
						<div class="column">
							<div>
								<label>Cognome:</label>
								<asp:TextBox ID="TBCognome" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
							<div>
								<label>Password:</label>
								<asp:TextBox ID="TBPassw" runat="server" TextMode="Password"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
							<div>
								<label>E-mail:</label>
								<asp:TextBox ID="TBMail" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
                              </div>
                            <div>
								<label>Nap:</label>
								<asp:TextBox ID="TBNap" runat="server"></asp:TextBox>
								<span class="error">Errore</span>
							</div>
						</div>
						<div class="bottom" >
                            <asp:Button ID="BRegistrati" runat="server" Text="Registrati" onclick="BRegistrati_Click" />
							<a href="Login2.aspx" rel="login" class="linkform">Hai già un account? Effettua il login qui</a>
							<div class="clear"></div>
						</div>
					</form>
					
                    
                    <form id="Form2" class="login" >
						<h3>Login</h3>
						<div>
							<label>Username:</label>
							<input type="text" />
							<span class="error">Errore</span>
						</div>
						<div>
							<label>Password: <a href="Password_dimenticata2.aspx" rel="forgot_password" class="forgot linkform">Hai dimenticato la password?</a></label>
							<input type="password" />
							<span class="error">Errore</span>
						</div>
						<div class="bottom">
                            <input type="submit" value="Login"></input>
							<a href="registrati2.aspx" rel="register" class="linkform">Ancora non hai un account? Registrati qua</a>
							<div class="clear"></div>
						</div>
					</form>
					
                    
                    <form class="forgot_password">
						<h3>Password dimenticata</h3>
						<div>
							<label>Username o Email:</label>
							<input type="text" />
							<span class="error">Errore</span>
						</div>
						<div class="bottom">
							<input type="submit" value="Invia"></input>
							<a href="Login2.aspx" rel="login" class="linkform">Ti sei ricordato? Effettua il login qui</a>
							<a href="registrati2.aspx" rel="register" class="linkform">Non hai un account? Registrati qua</a>
							<div class="clear"></div>
						</div>
					</form>
				</div>
                </div>
				<div class="clear"></div>
			
		

		<!-- The JavaScript -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
		    $(function () {
		        //the form wrapper (includes all forms)
		        var $form_wrapper = $('#form_wrapper'),
		        //the current form is the one with class active
					$currentForm = $form_wrapper.children('form.active'),
		        //the change form links
					$linkform = $form_wrapper.find('.linkform');

		        //get width and height of each form and store them for later						
		        $form_wrapper.children('form').each(function (i) {
		            var $theForm = $(this);
		            //solve the inline display none problem when using fadeIn fadeOut
		            if (!$theForm.hasClass('active'))
		                $theForm.hide();
		            $theForm.data({
		                width: $theForm.width(),
		                height: $theForm.height()
		            });
		        });

		        //set width and height of wrapper (same of current form)
		        setWrapperWidth();

		        /*
		        clicking a link (change form event) in the form
		        makes the current form hide.
		        The wrapper animates its width and height to the 
		        width and height of the new current form.
		        After the animation, the new form is shown
		        */
		        $linkform.bind('click', function (e) {
		            var $link = $(this);
		            var target = $link.attr('rel');
		            $currentForm.fadeOut(400, function () {
		                //remove class active from current form
		                $currentForm.removeClass('active');
		                //new current form
		                $currentForm = $form_wrapper.children('form.' + target);
		                //animate the wrapper
		                $form_wrapper.stop()
									 .animate({
									     width: $currentForm.data('width') + 'px',
									     height: $currentForm.data('height') + 'px'
									 }, 500, function () {
									     //new form gets class active
									     $currentForm.addClass('active');
									     //show the new form
									     $currentForm.fadeIn(400);
									 });
		            });
		            e.preventDefault();
		        });

		        function setWrapperWidth() {
		            $form_wrapper.css({
		                width: $currentForm.data('width') + 'px',
		                height: $currentForm.data('height') + 'px'
		            });
		        }

		        /*
		        for the demo we disabled the submit buttons
		        if you submit the form, you need to check the 
		        which form was submited, and give the class active 
		        to the form you want to show
		        */
		        $form_wrapper.find('input[type="submit"]')
							 .click(function (e) {
							     e.preventDefault();
							 });
		    });
        </script>
    </body>
</html>
